import React, { useEffect, useState } from 'react';
import useAppProductEventData from '../../../hook/useAppProductEventData';
import {Row, Col, Form, message, Select} from 'antd';
import moment from 'moment';
import FormItem from '../../../components/FormItem';
import FilterTool from '../../../components/FilterTool';
import '../index.less';
function searchMent(props) {
  // const [app_ids, setAppid] = useState(-1);
  // const [event_ids, setEventId] = useState(undefined);
  // const [product_ids, setProductId] = useState(undefined);
  const app_ids = -1
  const event_ids = undefined
  const product_ids = undefined
  const [timeout, setTimeouts] = useState(null);
  const [initParams, setDefaultValue] = useState(null);
  const {app_id, event_id, product_id, start, end, event_name, product_name, app_name} = props.echoParams || {};
  let { items=[], appId= app_id || -1, productId= product_id || -1, eventId= event_id || -1 } = {};
  if (props.seachParams) {
    items = [{
      label: {
        label: '',
      },
      name: 'app_id',
      options: {
        initialValue: app_id,
        rules: [{ required: true, message: '请选择渠道' }],
      },
      component: (
        <Select placeholder='请选择渠道' disabled={true}>
            <Select.Option value={app_id} key={app_id}>
              {app_name}
            </Select.Option>
        </Select>
      ),
    },{
      label: {
        label: '',
      },
      name: 'product_id',
      options: {
        initialValue: product_id,
        rules: [{ required: true, message: '请选择产品' }],
      },
      component: (
        <Select placeholder='请选择产品' disabled={true}>
            <Select.Option value={product_id} key={product_id}>
              {product_name}
            </Select.Option>
        </Select>
      ),
    },{
      label: {
        label: '',
      },
      name: 'event_id',
      options: {
        initialValue: event_id,
        rules: [{ required: true, message: '请选择事件' }],
      },
      component: (
        <Select placeholder='请选择事件' disabled={true}>
            <Select.Option value={event_id} key={event_id}>
              {event_name}
            </Select.Option>
        </Select>
      ),
    }]
  } else {
    const data = useAppProductEventData({
       ...props,
       app_id: app_id || app_ids,
       event_id: event_id || event_ids,
       product_id: product_id || product_ids,
       hideLabel:true,
       isAddAll:true,
       disabled: props.isDisable,
       app_placeholder: '请选择渠道',
       product_placeholder: '请选择产品',
       event_placeholder: '请选择事件',
       // disabled: props.actionType !== 'add',
       form: props.form,
    })
    items= data.items;
    appId= data.appId;
    productId= data.productId;
    eventId= data.eventId;
  }
  const [params, setParams] = useState({
    app_id: -1,
    event_id: -1,
    product_id: -1,
    start:  start || moment()
    .subtract(7, 'day')
    .startOf('day')
    .format('YYYY-MM-DD HH:mm:ss'),
    end: end || moment().format('YYYY-MM-DD HH:mm:ss'),
  });
  useEffect(()=>{
    if(timeout) {
      clearTimeout(timeout);
    }        
    const timeouts = setTimeout(() => {
      const obj = Object.assign(params, {
        app_id: appId || -1,
        event_id: eventId || -1,
        product_id: productId || -1,
      })
      setParams(obj);
      props.searchFn && props.searchFn(obj);
    }, 600);
    setTimeouts(timeouts);
  },[appId, productId, eventId]);
  useEffect(() => {
    if(start) {
        setDefaultValue({
            start, end
        })
    };
  },[start, end]);
  const formItems = [...items];
  const filterItems = [
    {
      type: 'rangepicker',
      key: 'start',
      name: ['start', 'end'],
    //   label: '统计时间',
      defaultValue: [
        moment()
        .subtract(7, 'day')
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss'),
        moment().format('YYYY-MM-DD HH:mm:ss'),
      ],
      disabledDate: (current) => {
        return current && current > moment().endOf('day');
      },
      ranges: {
        本周: [moment().startOf('week'), moment()],
        近7天: [moment().subtract('days', 6), moment()],
        本月: [moment().startOf('month'), moment()],
        近30天: [moment().subtract('days', 29), moment()],
      },
      format: 'YYYY-MM-DD HH:mm:ss',
      placeholder: ['起始时间', '结束时间'],
      allowClear: false,
    },
  ];
  const refreshFilter = (values, isChange) => {
    if (isChange !== undefined) {
      return
    }
    const endTime = moment(values.start).valueOf();
    const startTime = moment(values.end).valueOf();
    const times = moment(endTime).diff(moment(startTime), 'years');
    if (times) {
      setDefaultValue(null);
      setDefaultValue({
        start: params.start, end: params.end
      });
      message.warning('时间区间不能大于一年');
      return
    };
    const obj = Object.assign(params, {
      start: values.start,
      end: values.end
    })
    setParams(obj);
    props.searchFn && props.searchFn(obj);
  };
  return (
    <Row type='flex' align='middle' justify='end' gutter={10} className='row-search-Ment'>
      {formItems.map((item) => {
        return (
          <Col key={item.name}>
            <FormItem form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
     <Col key={'filterItems'}>
        <FilterTool
          data={filterItems}
          colNum={4}
          refreshFilter={refreshFilter}
          isOnChange={true}
          initParams={initParams}
          disabled={props.isDisable}
          justify='end'
        />
      </Col>
    </Row>
  );
};
export default Form.create()(searchMent);